<template>
    <div>
    	<!-- tab栏 -->
       <div class="head">
    		<image :src="src1" class="headd" resize="cover" @click="back()"></image>
    		<text class="head1">设置店铺信息</text>
    		<text class="head2" @click="sure()">确定</text>
    	</div>
    	<div class="info">
    		<text class="info1">基本信息</text>
    	</div>
    	<div class="Portraits">
    		<text class="Portraits_text">店铺头像</text>
    		<image :src="src2" class="header_bg"></image>
			<input type="file" v-on:change="picshow7($event)" class="changePic"/>
    	</div>
    	<div class="shop_name" @click="jump_introduce()">
    		<text class="shop_name1">店铺名称</text>
    		<text class="shop_name2">{{shop_name}}</text>
    	</div>
    	<div class="shop_adress" @click="shopAdress()">
    		<text class="shop_name1">店铺地址</text>
    		<text class="shop_name2">{{shop_adress}}</text>
    	</div>
    	<div class="shop_introduce" @click="intro()">
    		<text class="shop_name1">店铺简介</text>
    		<text class="shop_name2">{{shop_introduce}}</text>
    	</div>
    	<!-- 详细信息 -->
    	<div class="basic_info">
    		<text style="color: #33c179;">详细信息</text>
    	</div>
    	<!-- 店铺类别 -->
    	<div class="shop_category"  @click="shopCategory()">
    		<text class="shop_name1">店铺类别</text>
			<div class="shop_serves" v-for="i in shop_serve">
				<text>{{i.scname}}</text>
			</div>
			<text class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...</text>
    	</div>
    	<!-- 营业时间 -->
    	<div class="shop_time" @click="time()">
    		<text class="shop_name1">营业时间</text>
    		<text class="shop_name2">{{shop_time.shopStartTime}}-{{shop_time.shopEndTime}}</text>
    	</div>
    	<!-- 服务电话 -->
    	<div class="shop_phone" @click="phone()">
    		<text class="shop_name1">服务电话</text>
    		<text class="shop_name2">{{shop_phone}}</text>
    	</div>
    	<!-- 店铺图片 -->
    	<div class="shop_pic">
    		<div style="flex-direction: row">
    			<text class="shop_pic_text">店铺图片</text>
    			<text class="shop_pic_text1">(店铺就要秀出来,图片最少一张,最多6张)</text>
    		</div> 		
    		<image :src="src4" class="shop_pic1" @click="showPic()"></image>
    	</div>
    	<div class="pic" v-if="picc">
    		<div class="add_pic" v-show="show1">
    			<image style="width:100px;height:100px;" :src="src6" id="preview" class="add_pic_top"></image>
    			<input v-on:change="picshow($event)" id="imgPicker" type="file" class="ppp" accept="image/*" multiple/>
				<image @click="del1()" class="del_pic" style="width:20px;height:20px;" :src="src3"></image>
    		</div>
			<div class="add_pic" v-show="show2">
				<image style="width:100px;height:100px;" :src="src7" id="preview" class="add_pic_top"></image>
				<input v-on:change="picshow2($event)" id="imgPicker" type="file" class="ppp" accept="image/*" multiple/>
				<image @click="del2()" class="del_pic" style="width:20px;height:20px;" :src="src3"></image>
			</div>
			<div class="add_pic" v-show="show3">
				<image style="width:100px;height:100px;" :src="src8" id="preview" class="add_pic_top"></image>
				<input v-on:change="picshow3($event)" id="imgPicker" type="file" class="ppp" accept="image/*" multiple/>
				<image @click="del3()" class="del_pic" style="width:20px;height:20px;" :src="src3"></image>
			</div>
			<div class="add_pic" v-show="show4">
				<image style="width:100px;height:100px;" :src="src9" id="preview" class="add_pic_top"></image>
				<input v-on:change="picshow4($event)" id="imgPicker" type="file" class="ppp" accept="image/*" multiple/>
				<image @click="del4()" class="del_pic" style="width:20px;height:20px;" :src="src3"></image>
			</div>
			<div class="add_pic" v-show="show5">
				<image style="width:100px;height:100px;" :src="src10" id="preview" class="add_pic_top"></image>
				<input v-on:change="picshow5($event)" id="imgPicker" type="file" class="ppp" accept="image/*" multiple/>
				<image @click="del5()" class="del_pic" style="width:20px;height:20px;" :src="src3"></image>
			</div>
			<div class="add_pic" v-show="show6">
				<image style="width:100px;height:100px;" :src="src11" id="preview" class="add_pic_top"></image>
				<input v-on:change="picshow6($event)" id="imgPicker" type="file" class="ppp" accept="image/*" multiple/>
				<image @click="del6()" class="del_pic" style="width:20px;height:20px;" :src="src3"></image>
			</div>
    	</div>
    	<div class="exin"></div>
    </div>
</template>
<style scoped>
	.del_pic{
		position: absolute;
		right:-10px;
		top:-10px;
		z-index: 3;
	}
	.changePic{
		width: 55px;
		height: 55px;
		z-index: 2;
		opacity: 0;
		position: absolute;
		top: 0px;
		right: 21px;
	}
	.shop_category{
		width:100%;
		overflow-x:scroll;
		overflow-y: hidden;
	}
	.shop_serves{
		flex-direction: row;
		/*align-items: center;*/
	}
    .head{
    	width: 100%;
    	height: 48px;
    	padding-top: 12px;
    	/*background-color: pink;*/
    	box-sizing: border-box;
    	line-height: 32px;
    	flex-direction: row;
    	justify-content: center;
    	align-items: center;
    	/*margin-top: 17px;*/
    	position: fixed;
    	top: 0;
    	left: 0;
    	box-shadow: 1px 1px 1px #ccc;
    	background-color: #fff;
    	/*position: relative;*/
    	z-index: 2;	
    }
    .ppp{
    	width: 58px;
    	height: 58px;
    	background-color: red;
    	z-index: 2;
    	opacity: 0;
    	position: absolute;
    	top: 21px;
    	left: 21px;
    }
    .shop_name1{
    	color: #444;
    	font-size: 15px;
    }
    .shop_name2{
    	color: #666;
    	font-size: 14px;
    }
    .headd{
    	width: 15px;
    	height: 20px;
    	/*background-color: #33c179;*/
    	/*position: fixed;*/
    	position: absolute;
    	left: 12px;
    }
    .head2{
    	position: absolute;
    	right: 12px;
    	margin-left: 80px;
    	font-size: 20px;
    	/*color: #000;*/
    	font-weight: bold;
    }
    .head1{
    	font-size: 20px;
    	font-weight: bold;
    }
    .info{
    	width: 100%;
    	height: 35px;
    	padding-left: 12px;
    	margin-top: 52px;
    }
    .info1{
    	font-size: 16px;
    	color: #33c179;
    	position: absolute;
    	bottom: 0;
    }
    .Portraits{
    	width: 100%;
    	height: 55px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	padding-right: 12px;
    	box-sizing: border-box;
    	flex-direction: row;
    	justify-content: space-between;
    	border-bottom: solid 1px #ddd;
    }
    .header_bg{
    	width: 55px;
    	height: 55px;
    	border-radius: 50%;
    }
    .Portraits_text{
    	font-size: 15px;
    	color: #444;
    	margin-top: 20px;
    }
    .shop_adress,.shop_introduce,.shop_name,.shop_category,.shop_time,.shop_phone{
    	width: 100%;
    	height: 52px;
    	padding-right: 12px;
    	padding-left: 12px;
    	/*background-color: pink;*/
    	border-bottom: solid 1px #ddd;
    	flex-direction: row;
    	box-sizing: border-box;
    	justify-content: space-between;
    	padding-top: 19px;
    }
    .basic_info{
    	width: 100%;
    	height: 25px;
    	/*background-color: pink;*/
    	margin-top: 40px;
    	box-sizing: border-box;
    	border-bottom: solid 1px #ddd;
    	padding-left: 12px;
    }
    .shop_img{
    	width: 14px;
    	height: 14px;
		margin:0 5px;
		margin-left:8px;
    }
    .shop_pic{
    	width: 100%;
    	flex-direction: row;
    	height: 32px;
    	/*background-color: pink;*/
    	padding-left: 12px;
    	padding-right: 12px;
    	box-sizing: border-box;
    	justify-content: space-between;
    	/*position: relative;*/
    }
    .shop_pic_text{
    	font-size: 16px;
    	/*position: absolute;
    	bottom: 0;*/
    	margin-top: 14px;
    }
    .shop_pic_text1{
    	font-size: 13px;
    	color: #999;
    	/*position: absolute;
    	bottom: 0;*/
    	margin-top: 17px;
    }
    .shop_pic1{
    	width: 18px;
    	height: 18px;
    	background-color: pink;
    	margin-top: 19px;
    	margin-left: 6px;
    	justify-content: center;
    }
    .pic{
    	width: 100%;
    	height: 237px;
    	/*background-color: pink;*/
		display: block;
    	margin-top: 20px;
    	padding-left: 12px;
    	padding-right: 12px;
    	box-sizing: border-box;
    	/*justify-content: space-between;*/
    	flex-direction: row;
    	flex-wrap: wrap;
    }
    .pic_pic{
    	width: 99px;
    	height: 109px;
    	background-color: pink;
    	margin-bottom: 19px;
    }
    .add_pic{
		float: left;
    	width: 99px;
    	height: 109px;
    	border: solid 2px #e5e5e5;
    	justify-content: center;
    	/*margin-bottom: 17px;*/
    	align-items: center;
    	/*position: relative;*/
		margin:0 8px;
    	z-index: 1;
		margin-top:10px;
    }
    .add_pic_top{
    	width: 58px;
    	height: 58px;
    	/*background-color: pink;*/
    	z-index: 1;
    }
    .exin{
    	width: 100%;
    	height: 17px;
    }
	#imgPreview {
		float: left;
		border: none;
	}
	.add_pic_top {
		/*margin-left: 4px;*/
		width: 50px;
		height: 50px;
	}
	.add_pic_top {
		display: block;
		float: left;
		overflow: hidden;
		position: relative;
		background-size: contain;
	}
	  .ppp {
		  height: 50px;
		  opacity: 0;
		  filter: alpha(opacity=0);
		  position: absolute;
		  top: 0;
		  right: 0;
	  }
</style>
<script>
    var stream = weex.requireModule('stream');
    export default {
    data () {
        return {
          	src1: 'http://192.168.2.123:8080/img/index_back.png',
			src2: 'http://192.168.2.123:8080/img/header.jpg',
			src3:"http://192.168.2.123:8080/img/del_img.jpg",
            src4:"http://192.168.2.123:8080/img/add_img.jpg",
          	shop_name: '当年的月圆',
          	shop_adress: '篆刻离别烟雨江南',
          	shop_introduce: '点击设置', //店铺简介
          	shop_time: '点击设置',
          	shop_phone: '点击设置',
          	src6: 'http://192.168.2.123:8080/img/add_img.jpg', //添加照片中的十字图标
            src7:"http://192.168.2.123:8080/img/add_img.jpg",
            src8:"http://192.168.2.123:8080/img/add_img.jpg",
            src9:"http://192.168.2.123:8080/img/add_img.jpg",
            src10:"http://192.168.2.123:8080/img/add_img.jpg",
            src11:"http://192.168.2.123:8080/img/add_img.jpg",
          	picc: true, //显示or隐藏店铺图标
			shop_serve:[],
			changed_serve:[],
            show1:true,
            show2:false,
            show3:false,
            show4:false,
            show5:false,
            show6:false,
        }
    },
    methods: {
        // 店铺头像切换展示
        picshow7(e){
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                this.src2 = e.target.result;
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
        },
        // 添加显示图片
        picshow6(e){
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                this.src11 = e.target.result;
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
            this.show6=true;
        },
        picshow5(e){
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                this.src10 = e.target.result;
                if(this.src10!==""){
                    this.show6=true;
                }
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
        },
        picshow4(e){
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                this.src9 = e.target.result;
                if(this.src9!==""){
                    this.show5=true;
                }
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);

        },
        picshow3(e){
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                this.src8 = e.target.result;
                if(this.src8!==""){
                    this.show4=true;
                }
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
        },
        picshow2(e){
            //当没选中图片时，清除
            if(e.target.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            //实例化一个FileReader
            var reader = new FileReader();
            reader.onload =  (e) => {
                //当reader加载时，把图片的内容赋值给
                this.src7 = e.target.result;
                if(this.src7!==""){
                    this.show3=true;
                }
            };
            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(e.target.files[0]);
        },
        picshow(e){
                    //当没选中图片时，清除
                    if(e.target.files.length === 0){
                        document.querySelector('#preview').src = '';
                        return;
                    }
                    //实例化一个FileReader
                    var reader = new FileReader();
                    reader.onload =  (e) => {
                        //当reader加载时，把图片的内容赋值给
                        this.src6 = e.target.result;
                        if(this.src6!==""){
                            this.show2=true;
                        }
                    };
                    //读取选中的图片，并转换成dataURL格式
                    reader.readAsDataURL(e.target.files[0]);
		},
      // 修改店铺名称
      jump_introduce(){
      	this.$router.push('/shop_name');
      },
      // 点击隐藏显示
      showPic(){
      	this.picc = !this.picc;
      },
      // 点击确定
      sure(){
          let serverIds = JSON.parse(localStorage.getItem('shopServeIds')).serveIds;
          let userId=JSON.parse(localStorage.getItem('usersid')).idCode;
          let shopId=JSON.parse(localStorage.getItem('shopId')).shopId;

          var userIds=JSON.stringify(userId);
          var shopIds=JSON.stringify(shopId);
          var ssname=JSON.stringify(this.shop_name);
          var sspath=JSON.stringify(this.shop_adress);
          var sintroduce=JSON.stringify(this.shop_introduce);
          var serveIds=JSON.stringify(serverIds);
          var startTimes=JSON.stringify(this.shop_time.shopStartTime);
          var endTimes=JSON.stringify(this.shop_time.shopEndTime);
          var phones=JSON.stringify(this.shop_phone);
          var picArr = [];
          picArr.push(this.src6);
          picArr.push(this.src7);
          picArr.push(this.src8);
          picArr.push(this.src9);
          picArr.push(this.src10);
          picArr.push(this.src11);
		  var opicArr=[];
          picArr.forEach((v,k)=>{
              if(v!==''&&v!=="http://192.168.2.123:8080/img/add_img.jpg"){
                  var a = {
                      "shopsImge":v
                  };
                  opicArr.push(a);
			  }
		  });
		  var npicArr=JSON.stringify(opicArr);
          // 修改信息提交
          stream.fetch({
              method: "POST",
              url: "http://192.168.2.140:8081/api/shops/updateShops",
              type: "json",
              body: `{
        			"sid": ${shopIds},
        			"shopAccountid":${userIds},
        			"sphone":${phones},
        			"sname": ${ssname},
        			"saddress":${sspath},
        			"headportrait":${JSON.stringify(this.src2)},
        			"businessstarthours":${startTimes},
        			"businessendhours":${endTimes},
        			"shopinstructions": ${sintroduce},
        			"shopsImgDTOS":${npicArr},
        			"shopsClassDTOS": ${serveIds}
					}`,
              headers:{
                  'Content-Type':'application/json'
              },
              mode:"cors",
          }, (ret) => {
              console.log(ret)
			  if(ret.ok===true){
                  this.$router.push('/home');
                  // 路由跳转清空localStorage
                  localStorage.removeItem('shopMsg');
                  localStorage.removeItem('shopServes');
                  localStorage.removeItem('shopName');
                  localStorage.removeItem('shopPath');
                  localStorage.removeItem('shopIntroduction');
                  localStorage.removeItem('shopTime');
                  localStorage.removeItem('shopPhone');
              }
          }, function (response) {
              // console.log(response);
          });

      },
      // 返回上一层
      back(){
        this.$router.push('/home');
      },
      // 修改店铺地址
      shopAdress(){
        this.$router.push('/shop_adress');
      },
      // 修改店铺类别
      shopCategory(){
        this.$router.push('/shop_category');
      },
      // 修改店铺简介
      intro(){
        this.$router.push('/shop_introduce');
      },
      // 修改营业时间
      time(){
        this.$router.push('/shop_time');
      },
      // 修改店铺电话
      phone(){
        this.$router.push('/shop_phone');
      },
		del1(){
            this.src6='http://192.168.2.123:8080/img/add_img.jpg';
			this.show1=true;
		},
        del2(){
            this.src7='http://192.168.2.123:8080/img/add_img.jpg';
            this.show2=false;
        },
        del3(){
            this.src8='http://192.168.2.123:8080/img/add_img.jpg';
            this.show3=false;
        },
        del4(){
            this.src9='http://192.168.2.123:8080/img/add_img.jpg';
            this.show4=false;
        },
        del5(){
            this.src10='http://192.168.2.123:8080/img/add_img.jpg';
            this.show5=false;
        },
        del6(){
            this.src11='http://192.168.2.123:8080/img/add_img.jpg';
            this.show6=false;
        }
    },
		mounted:function(){
        	// 从店铺页拉取的数据(总数据)
            let message = JSON.parse(localStorage.getItem('shopMsg'));
            this.src2=message.headerImg;
            // 抽屉页面拉取数据--------------------
            // 店铺分类
            let message1=JSON.parse(localStorage.getItem('shopServes'));
            // 店铺名称
            let message2 = JSON.parse(localStorage.getItem('shopName'));
            // 店铺地址
            let message3= JSON.parse(localStorage.getItem('shopPath'));
            //d店铺简介
            let message4 = JSON.parse(localStorage.getItem('shopIntroduction'));
            if(!message4){
                this.shop_introduce="请填写商铺信息"
			}else{
                this.shop_introduce=message4.name;
            }
            // 营业时间
            let message5 = JSON.parse(localStorage.getItem('shopTime'));
            if(!message5){
                this.shop_time={
                    shopStartTime:"00:00",
                    shopEndTime:"00:00"
				};
			}else{
                this.shop_time=message5;
            }
            // 服务电话
            let message6 = JSON.parse(localStorage.getItem('shopPhone'));
            if(!message6){
                this.shop_phone="请设置您的服务电话";
            }else{
                this.shop_phone=message6.shopPhone;
            }
            console.log(message);
            // （店名展示判断）判断是否修改
			if(!message2){
                this.shop_name=message.shopName;
            }else{
                this.shop_name=message2.path;
			}
            // （地址展示判断）判断是否修改
			if(!message3){
                this.shop_adress=message.shopPath;
            }else{
                this.shop_adress=message3.path;
			}

            //（类别展示判断） 判断修改后的local是否为空
            if(!message1){
                this.shop_serve=message.shopServes;
            }else{
                this.shop_serve=message1.scname;
			}
            // （类别展示判断）判断数组长度
            if(this.shop_serve.length>2){
                this.shop_serve.splice(2);
			}
		}

}
</script>